<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .icon-cray {
            color: #ffb800 !important;
        }

        .icon-blue {
            color: #1e9fff !important;
        }

        .icon-tip {
            color: #ff5722 !important;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

            .layuimini-qiuck-module a i {
                display: inline-block;
                width: 100%;
                height: 60px;
                line-height: 60px;
                text-align: center;
                border-radius: 2px;
                font-size: 30px;
                background-color: #F8F8F8;
                color: #333;
                transition: all .3s;
                -webkit-transition: all .3s;
            }

            .layuimini-qiuck-module a cite {
                position: relative;
                top: 2px;
                display: block;
                color: #666;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 14px;
            }

        .welcome-module {
            width: 100%;
            height: 210px;
        }

        .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05)
        }

        .panel-body {
            padding: 10px
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            color: inherit
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .layui-red {
            color: red
        }

        .main_btn > p {
            height: 40px;
        }

        .layui-bg-number {
            background-color: #F8F8F8;
        }

        .layuimini-notice:hover {
            background: #f6f6f6;
        }

        .layuimini-notice {
            padding: 7px 16px;
            clear: both;
            font-size: 12px !important;
            cursor: pointer;
            position: relative;
            transition: background 0.2s ease-in-out;
        }

        .layuimini-notice-title, .layuimini-notice-label {
            padding-right: 70px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .layuimini-notice-title {
            line-height: 28px;
            font-size: 14px;
        }

        .layuimini-notice-extra {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 16px;
            display: inline-block;
            height: 16px;
            color: #999;
        }

        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

            .top-panel > .layui-card-body {
                height: 60px;
            }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>
<body>
    <!--<div class="layuimini-container">-->
    <div class="layuimini-main">

        <div class="layui-box">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md12">
                    <blockquote class="layui-elem-quote main_btn">
                        <p>本模板基于layui最新版本实现。演示地址为：<a class="layui-btn " target="_blank" href="http://code.langben.com">高质量代码前端框架</a></p>
                        <p>技术交流QQ群（576472163） </p>


                        <p>Gitee地址：<a class="layui-btn " target="_blank" href="https://gitee.com/bencom/ui">高质量代码前端框架</a> </p>
                    </blockquote>

                    <h1 id="基础参数一览表"><a name="基础参数一览表" class="anchor-navigation-ex-anchor" href="#基础参数一览表"><i class="fa fa-link" aria-hidden="true"></i></a>基础参数一览表</h1>
                    <blockquote class="layui-elem-quote main_btn">
                        <p>以下参数是<code>miniAdmin.render();</code>初始化时进行传入。</p>
                        <p>  在index.html中有详细的说明</p>
                    </blockquote>
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>参数</th>
                                <th>说明</th>
                                <th>类型</th>
                                <th>默认值</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>iniUrl</td>
                                <td>初始化接口</td>
                                <td>string</td>
                                <td>null</td>
                                <td>实际使用，请对接后端接口动态生成，格式请参考文件：<code>api/init.json</code></td>
                            </tr>
                            <tr>
                                <td>clearUrl</td>
                                <td>缓存清理接口</td>
                                <td>string</td>
                                <td>null</td>
                                <td>实际使用，请对接后端接口动态生成，格式请参考文件：<code>api/clear.json</code></td>
                            </tr>
                            <tr>
                                <td>urlHashLocation</td>
                                <td>是否打开hash定位</td>
                                <td>bool</td>
                                <td>false</td>
                                <td>开启后，会显示路由信息，刷新页面后将定位到当前页</td>
                            </tr>

                            <tr>
                                <td>multiModule</td>
                                <td>是否开启多模块</td>
                                <td>bool</td>
                                <td>false</td>
                                <td>个人建议开启</td>
                            </tr>
                            <tr>
                                <td>menuChildOpen</td>
                                <td>是否默认展开菜单</td>
                                <td>bool</td>
                                <td>false</td>
                                <td>个人建议关闭</td>
                            </tr>
                            <tr>
                                <td>loadingTime</td>
                                <td>初始化加载时间</td>
                                <td>0</td>
                                <td>0</td>
                                <td>建议0-2之间</td>
                            </tr>
                            <tr>
                                <td>pageAnim</td>
                                <td>iframe窗口动画</td>
                                <td>bool</td>
                                <td>false</td>
                                <td>添加tab或者切换时的过渡动漫</td>
                            </tr>
                            <tr>
                                <td>maxTabNum</td>
                                <td>最大的tab打开数量</td>
                                <td>int</td>
                                <td>20</td>
                                <td>防止打开太多的tab窗口导致页面卡死</td>
                            </tr>
                        </tbody>
                    </table>


                    <h1 id="后台模板初始化"><a name="后台模板初始化" class="anchor-navigation-ex-anchor" href="#后台模板初始化"><i class="fa fa-link" aria-hidden="true"></i></a>后台模板初始化</h1>

                    <blockquote class="layui-elem-quote main_btn">
                        在<code>index.html</code>文件内引入<code>lay-config.js</code>文件，请根据实际情况修改<code>lay-config.js</code>里面扩展的路径。
                    </blockquote>

                    <h1 id="初始化api接口返回的参数说明"><a name="初始化api接口返回的参数说明" class="anchor-navigation-ex-anchor" href="#初始化api接口返回的参数说明"><i class="fa fa-link" aria-hidden="true"></i></a>初始化api接口返回的参数说明</h1>
                    <blockquote class="layui-elem-quote main_btn">
                        <p>
                            api文件夹下的json文件是为模拟接口而写，index页面的导航和banner页的数据都是来自
                            <code> init.json</code>文件，说明如下：
                        </p>

                        <ul>
                            <li><code>homeInfo</code> 是首页信息</li>
                            <li><code>logoInfo</code> 是logo信息</li>
                            <li><code>menuInfo</code> 是头部模块和左侧菜单对应的信息</li>
                        </ul>

                    </blockquote>

                    <h1 id="缓存清理接口返回的参数说明"><a name="缓存清理接口返回的参数说明" class="anchor-navigation-ex-anchor" href="#缓存清理接口返回的参数说明"><i class="fa fa-link" aria-hidden="true"></i></a>缓存清理接口返回的参数说明</h1>
                    <blockquote class="layui-elem-quote main_btn">
                        <p>  返回参数对应的事例(code：0，清除缓存失败；code：1，表示清除缓存成功；)，这点很重要，要后台方法实现清除cache，mamcached，redis，session等缓存</p>
                    </blockquote>       <blockquote>
                        <p>示例说明</p>
                    </blockquote>
                    <div class="code-wrapper">
                        <pre><code class="lang-json"><span class="code-line">   {</span>
<span class="code-line">     <span class="hljs-string">"code"</span>: <span class="hljs-number">1</span>,</span>
<span class="code-line">     <span class="hljs-string">"msg"</span>: <span class="hljs-string">"清除服务端缓存成功"</span></span>
<span class="code-line">   }</span></code><i class="fa fa-clone t-copy"></i></pre>
                    </div>
                    <h1 id="在页面中弹出新的tab窗口（标签）"><a name="在页面中弹出新的tab窗口（标签）" class="anchor-navigation-ex-anchor" href="#在页面中弹出新的tab窗口（标签）"><i class="fa fa-link" aria-hidden="true"></i></a>在页面中弹出新的Tab窗口（标签）</h1>
                    <ul>
                        <li>如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入<code>miniTab.js</code>文件）</li>
                        <li>参数说明（layuimini-content-href：页面链接，data-title：标题）</li>
                        <li>调用方法进行监听：<code>miniTab.listen();</code></li>
                        <li>示例在<code>page/welcome-1.html</code>页面中有</li>
                    </ul>
                    <blockquote>
                        <p>示例说明</p>
                    </blockquote>
                    <div class="code-wrapper">
                        <pre><code class="lang-js"><span class="code-line">    &lt;a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" &gt;基本资料&lt;/a&gt;</span>
<span class="code-line"></span>
<span class="code-line">    layui.use(['form','miniTab'], function () {</span>
<span class="code-line">        var form = layui.form,</span>
<span class="code-line">            layer = layui.layer,</span>
<span class="code-line">            miniTab = layui.miniTab;</span>
<span class="code-line"></span>
<span class="code-line">        miniTab.listen();</span>
<span class="code-line"></span>
<span class="code-line">    });</span></code><i class="fa fa-clone t-copy"></i></pre>
                    </div>
                    <h1 id="在页面中弹出新的tab窗口（js方法）"><a name="在页面中弹出新的tab窗口（js方法）" class="anchor-navigation-ex-anchor" href="#在页面中弹出新的tab窗口（js方法）"><i class="fa fa-link" aria-hidden="true"></i></a>在页面中弹出新的Tab窗口（JS方法）</h1>
                    <ul>
                        <li>如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入<code>miniTab.js</code>文件）</li>
                        <li>参数说明（href：页面链接，title：标题）</li>
                    </ul>
                    <blockquote>
                        <p>示例说明</p>
                    </blockquote>
                    <div class="code-wrapper">
                        <pre><code class="lang-js"><span class="code-line"></span>
<span class="code-line">    layui.use([<span class="hljs-string">'form'</span>,<span class="hljs-string">'miniTab'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</span>
<span class="code-line">        <span class="hljs-keyword">var</span> form = layui.form,</span>
<span class="code-line">            layer = layui.layer,</span>
<span class="code-line">            miniTab = layui.miniTab;</span>
<span class="code-line"></span>
<span class="code-line">        <span class="hljs-comment">// 打开新的窗口 </span></span>
<span class="code-line">        miniTab.openNewTabByIframe({</span>
<span class="code-line">            <span class="hljs-attr">href</span>:<span class="hljs-string">"page/form.html"</span>,</span>
<span class="code-line">            <span class="hljs-attr">title</span>:<span class="hljs-string">"按钮示例"</span>,</span>
<span class="code-line">        });</span>
<span class="code-line"></span>
<span class="code-line">    });</span></code><i class="fa fa-clone t-copy"></i></pre>
                    </div>
                    <h1 id="在iframe页面中关闭当前tab窗口"><a name="在iframe页面中关闭当前tab窗口" class="anchor-navigation-ex-anchor" href="#在iframe页面中关闭当前tab窗口"><i class="fa fa-link" aria-hidden="true"></i></a>在iframe页面中关闭当前Tab窗口</h1>
                    <ul>
                        <li>如需在iframe页面中，请参考下方代码。（备注：miniTab.js文件）</li>
                        <li>调用方法：<code>miniTab.deleteCurrentByIframe();</code></li>
                        <li>示例在<code>user-password.html</code>,<code>user-setting.html</code>页面中都有</li>
                    </ul>
                    <blockquote>
                        <p>示例说明</p>
                    </blockquote>
                    <div class="code-wrapper">
                        <pre><code class="lang-js"><span class="code-line">    layui.use([<span class="hljs-string">'form'</span>,<span class="hljs-string">'miniTab'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</span>
<span class="code-line">        <span class="hljs-keyword">var</span> form = layui.form,</span>
<span class="code-line">            layer = layui.layer,</span>
<span class="code-line">            miniTab = layui.miniTab;</span>
<span class="code-line"></span>
<span class="code-line">        <span class="hljs-comment">//监听提交</span></span>
<span class="code-line">        form.on(<span class="hljs-string">'submit(saveBtn)'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{</span>
<span class="code-line">            <span class="hljs-keyword">var</span> index = layer.alert(<span class="hljs-built_in">JSON</span>.stringify(data.field), {</span>
<span class="code-line">                <span class="hljs-attr">title</span>: <span class="hljs-string">'最终的提交信息'</span></span>
<span class="code-line">            }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</span>
<span class="code-line">                layer.close(index);</span>
<span class="code-line">                miniTab.deleteCurrentByIframe();</span>
<span class="code-line">            });</span>
<span class="code-line">            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span>
<span class="code-line">        });</span>
<span class="code-line"></span>
<span class="code-line">    });</span></code><i class="fa fa-clone t-copy"></i></pre>
                    </div>

                    <h1 id="常见问题"><a name="常见问题" class="anchor-navigation-ex-anchor" href="#常见问题"><i class="fa fa-link" aria-hidden="true"></i></a>常见问题</h1>
                    <ul>
                        <li><font color="red">修改js后刷新页面未生效，请尝试清除浏览器缓存。</font></li>
                        <li>IIS环境下请配置支持解析<code>.json</code>格式文件，例如：在根目录的文件夹上点击右键，属性，安全，可以增加一个everyone可以修改的权限</li>
                    </ul>
                    <br />

                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md6">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改选项卡样式</div>
                            <div class="layuimini-notice-extra">2019-07-11 23:06</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增系统404模板</div>
                            <div class="layuimini-notice-extra">2019-07-11 12:57</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">新增treetable插件和菜单管理样式</div>
                            <div class="layuimini-notice-extra">2019-07-05 14:28</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修改logo缩放问题</div>
                            <div class="layuimini-notice-extra">2019-07-04 11:02</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复左侧菜单缩放tab无法移动</div>
                            <div class="layuimini-notice-extra">2019-06-17 11:55</div>
                            <div class="layuimini-notice-content layui-hide">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="layui-col-xs12 layui-col-md6">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">要展示的指标名称</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                                9,054,056
                            </div>
                            <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                比昨天 <a style="color: #1aa094">▲0.12</a><br>
                                比七日 <a style="color: #bd3004">▼0.06</a>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-card top-panel">
                    <div class="layui-card-header">要展示的指标名称</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                                9,054,056
                            </div>
                            <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                                比昨天 <a style="color: #1aa094">▲0.12</a><br>
                                比七日 <a style="color: #bd3004">▼0.06</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md9">
                <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md3">
                <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
            </div>
        </div>


        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md6">
                <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
            </div>
            <div class="layui-col-xs12 layui-col-md6">
                <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
            </div>
        </div>


    </div>
    <!--</div>-->
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'echarts'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                echarts = layui.echarts;

            /**
             * 报表功能
             */
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

            var optionRecords = {
                title: {
                    text: '指标名称-报表图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '邮件营销',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        areaStyle: {},
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {},
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            echartsRecords.setOption(optionRecords);


            /**
             * 玫瑰图表
             */
            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
            var optionPies = {
                title: {
                    text: '玫瑰图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        roseType: 'radius',
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 368, name: '搜索引擎' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsPies.setOption(optionPies);


            /**
             * 柱状图
             */
            var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

            var optionDataset = {
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
                        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
                        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
                        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    { type: 'bar' },
                    { type: 'bar' },
                    { type: 'bar' }
                ]
            };

            echartsDataset.setOption(optionDataset);


            /**
             * 中国地图
             */
            var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


            var optionMap = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                grid: { top: '55%' },
                series: [
                    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            echartsMap.setOption(optionMap);


            // echarts 窗口缩放自适应
            window.onresize = function () {
                echartsRecords.resize();
            }

        });
    </script>
</body>
</html>
